<script setup>
import { ref } from "vue";
import { httpRequest } from "../../utils/http";
import { useStore } from "../../store/store";
const store = useStore();
console.log(store);
const isChecked = ref(true);
const notUseList = ref([]);
const usedList = ref([]);
//获取订单信息
const getnotUse = async () => {
  uni.showLoading({
    title: "加载中",
    mask: false,
  });
  const res = await httpRequest("/api/kaByAgentId", "POST", {
    agentId: store.userInfo.agentId,
    state: 1,
  });
  console.log(res);
  notUseList.value = res.data.dataList;
  uni.hideLoading();
};
const getUsed = async () => {
  uni.showLoading({
    title: "加载中",
    mask: false,
  });
  const res = await httpRequest("/api/kaByAgentId", "POST", {
    agentId: store.userInfo.agentId,
    state: 2,
  });
  console.log(res);
  usedList.value = res.data.dataList;
  uni.hideLoading();
};
const notUse = async () => {
  if (isChecked.value) return;
  isChecked.value = true;
  getnotUse();
};
const used = async () => {
  if (!isChecked.value) return;
  isChecked.value = false;
  getUsed();
};
getnotUse();

const copy = (copy) => {
  uni.setClipboardData({
    data: copy,
    success: (result) => {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
    fail: (error) => {
      console.log(error);
      uni.showToast({ title: "复制失败", icon: "none" });
    },
  });
};

const goCardInfo = (i) => {
  if (isChecked.value) {
    store.setCardInfo(notUseList.value[i]);
    store.setIsUse(true);
    uni.navigateTo({ url: "/pages/index/cardInfo" });
  } else {
    store.setCardInfo(usedList.value[i]);
    store.setIsUse(false);
    uni.navigateTo({ url: "/pages/index/cardInfo" });
  }
};
const nameColor = (e) => {
  if(e=='专业版')return '.zhuanye'
  if(e=='旗舰版')return '.qijian'
}

const timestamp2Time = (time) => {
  // 使用Date对象将时间戳转换为日期对象
  const date = new Date(time);

  // 获取日期的各个部分，如年、月、日、时、分、秒
  const year = date.getFullYear(); // 年
  const month = date.getMonth() + 1; // 月 (注意月份从0开始，需要加1)
  const day = date.getDate(); // 日
  const hours = date.getHours(); // 时
  const minutes = date.getMinutes(); // 分
  const seconds = date.getSeconds(); // 秒

  // 构建日期字符串，例如：2022-10-08 14:30:00
  const formattedDate = `${year}-${month
    .toString()
    .padStart(2, "0")}-${day.toString().padStart(2, "0")} ${hours
    .toString()
    .padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
  const ymdData = `${year}-${month.toString().padStart(2, "0")}-${day
    .toString()
    .padStart(2, "0")}`; // 输出格式化后的日期字符串
  return ymdData;
};
</script>

<template>
  <view class="page">
    <view class="tap">
      <view class="notuse" :class="{ active: isChecked }" @click="notUse()">未使用</view>
      <view class="used" :class="{ active: !isChecked }" @click="used()">已使用</view>
    </view>
    <!-- 未使用 -->
    <view v-if="isChecked" style="background-color: rgb(235, 236, 237)">
      <view
        class="item"
        @click="goCardInfo(index)"
        v-for="(item, index) in notUseList"
        :key="item.id"
      >
        <view class="top">
          <text :class="nameColor(item.productName)">{{item.productName}}</text>
          <text style="font-size: 24rpx;color: rgb(144,147,153);font-weight: 400;">购买日期:{{ timestamp2Time(Number(item.createDate)) }}</text>
        </view>
        <view class="num"> 合成视频数量 {{ item.useNum }}次 </view>
        <view class="bottom">
          <view class="pass">卡密：{{ item.kaMi }}</view>
          <view class="copy" @click.stop="copy(item.kaMi)">复制</view>
        </view>
      </view>
    </view>
    <!-- 已使用 -->
    <view v-else style="background-color: rgb(235, 236, 237)">
      <view
        class="item"
        @click="goCardInfo(index)"
        v-for="(item, index) in usedList"
        :key="item.id"
      >
        <view class="top">
          <text :class="nameColor(item.productName)">{{item.productName}}</text>
          <text style="font-size: 24rpx;color: rgb(144,147,153);font-weight: 400;">购买日期:{{ timestamp2Time(Number(item.createDate)) }}</text>
        </view>
        <view class="num"> 合成视频数量 {{ item.useNum }}次 </view>
        <view class="bottom">
          <view class="pass" style="margin: 0 auto">卡密：{{ item.kaMi }}</view>
          <image class="used-img" src="../../static/list_icon_yshyong.png" mode="" />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  .tap {
    height: 116rpx;
    display: flex;
    justify-content: space-around;
    font-size: 32rpx;
    color: rgb(144, 147, 153);
    background-color: #fff;
    .notuse {
      height: 116rpx;
      line-height: 116rpx;
    }
    .used {
      height: 116rpx;
      line-height: 116rpx;
    }
  }
}
.item {
  position: relative;
  box-sizing: border-box;
  width: 690rpx;
  height: 266rpx;
  border-radius: 28rpx;
  padding: 24rpx;
  background-color: #fff;
  margin: 30rpx auto 24rpx;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 36rpx;
    font-weight: 700;
    color: rgb(64, 158, 255);
  }
  .num {
    font-size: 32rpx;
    color: rgb(69, 70, 74);
    margin-top: 30rpx;
    margin-bottom: 30rpx;
  }
  .bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .pass {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      height: 56rpx;
      padding: 6rpx 24rpx 8rpx 24rpx;
      box-sizing: border-box;
      background-color: rgb(245, 247, 250);
      margin-right: 18rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: rgb(192, 196, 204);
    }
    .used-img {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 180rpx;
      height: 174rpx;
    }
    .copy {
      width: 128rpx;
      height: 56rpx;
      text-align: center;
      line-height: 56rpx;
      background-color: rgb(64, 158, 255);
      color: #fff;
      font-size: 32rpx;
      border-radius: 12rpx;
    }
  }
}
.active {
  color: rgb(64, 158, 255) !important;
  border-bottom: 4rpx solid rgb(64, 158, 255);
  font-weight: 700;
}
.zhuanye{
  color: rgb(255,194,26);
}
.qijian{
  color: rgb(186,97,255);
}
</style>
